<template>
  <div class="three-canvas" ref="threeTarget"></div>
</template>

<script>
import { onMounted, ref } from 'vue'
import { TEngine } from './assets/js/TEngine'
import { basicObjectList } from './assets/js/TbasicObj'
import { lightList } from './assets/js/Tlights'
import { helperList } from './assets/js/Thelper'
import { codeModelList } from './assets/js/TcodeModel'
// import { getFrame } from './assets/js/TLoadModle'

import { groupPromise } from './assets/js/TGroup'

import { spriteGroup } from './assets/js/TSprites'

// import { TcanvasTextureEditor } from './assets/js/TcanvasTextureEditor'

export default {
  name: 'App',
  setup() {
    const threeTarget = ref(null)
    onMounted(() => {
      const TE = new TEngine(threeTarget.value)
      TE.addObject(...basicObjectList)

      // 模仿生成几何体过程
      // const testCanvas = new TcanvasTextureEditor()
      // testCanvas.draw((ctx) => {
      //   ctx.beginPath()
      //   ctx.rect(10, 10, 200, 200)
      //   ctx.strokeStyle = 'red'
      //   ctx.stroke()
      //   ctx.closePath()
      // }).preview()

      TE.addObject(...lightList)
      TE.addObject(...helperList)
      TE.addObject(...codeModelList)

      // getFrame().then((frame) => {
      //   frame && TE.addObject(frame)
      // })
      groupPromise.then((group) => {
        group && TE.addObject(group)
      })
      TE.addObject(spriteGroup)
    })
    return {
      threeTarget,
    }
  },
}
</script>

<style>
.three-canvas {
  width: 100%;
  height: 100%;
}
#app {
  width: 100%;
  height: 100%;
}
</style>
